<template>
	<uni-popup ref="toastPopup" type="center" mask-background-color="transparent" :is-mask-click="false">
		<view class="toast-wrapper">
			<view class="content">{{ title }}</view>
		</view>	
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				duration: 1500
			}
		},
		methods: {
			show(config = {}) {
				this.$refs.toastPopup.open()
				this.title = config?.title || ''
				setTimeout(() => {
					this.$refs.toastPopup.close()
				}, this.duration)
			},
		}
	}
</script>

<style scoped lang="scss">
	.toast-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		
		.content {
			font-size: 26rpx;
			color: #fff;
			background-color: rgba(0, 0, 0, .7);
			border-radius: 16rpx;
			padding: 24rpx 36rpx;
			text-align: center;
			animation: fadeZoom .1s linear;
			white-space: pre-line;
			word-wrap: break-word;
			max-width: 360rpx;
		}
	}
	@keyframes fadeZoom {
		0% {
			transform: scale(.5);
			opacity: .5;
		}
	
		100% {
			transform: scale(1);
			opacity: 1;
		}
	}
</style>